<!-- 盘口信息 -->
<template>
  <div>
    <div class="content">
       <!-- 下单 -->
       <div class="content_right" style="margin-right: 20px;">
        <!-- 买入/卖出切换 -->
        <div class="rightFirst">
          <div
            v-for="(item, index) in tradeTypeList"
            :key="item.label"
            :class="[
              'trade-type-btn',
              form.type == item.value && index == 0 ? 'trade-type-btn--buy' : '',
              form.type == item.value && index == 1 ? 'trade-type-btn--sell' : '',
              index == 0 ? 'trade-type-btn--left' : 'trade-type-btn--right'
            ]"
            @click="checkedTradeType(item)"
          >
            {{ item.label }}
          </div>
        </div>
        <!-- 市价/限价 rxce卖出隐藏限价 -->
        <div
          class="rightScond"
          v-if="
            !['rxce'].includes(_getConfig('_APP_ENV')) ||
            (['rxce'].includes(_getConfig('_APP_ENV')) && form.type == 0)
          "
        >
          <van-popover v-model:show="showPopover" :show-arrow="false">
            <div class="rightScondList">
              <div
                class="rightScondListItem"
                v-for="item in delegateTypeList"
                :key="item.label"
                :class="{
                  hightBlue: form.delegateType == item.value
                }"
                @click="checkedDelegateType(item)"
              >
                {{ item.label }}
              </div>
            </div>
            <template #reference>
              <div class="entrustSelect">
                <div>{{ currentDelegateType.label }}</div>
                <svg-load  :name="showPopover?'jiantou10x5-s':'jiantou10x5-x'" class="img"></svg-load>
              </div>
            </template>
          </van-popover>
        </div>
        <!-- 占位：'市价' -->
        <div class="rightThird" v-if="form.delegateType == 1">
          {{ currentDelegateType.placeholder }}
        </div>
        <div class="rightFifth" v-if="form.delegateType == 0">
          <!-- 限价>买入，限价>卖出：价格 -->
          <input
            v-model="form.price"
            @input="priceChange"
            type="number"
            class="amount"
            :placeholder="`${_t18(`price`)} (${props.coinInfo.baseCoinUpperCase})`"
          />
        </div>
        <!-- 限价>买入，限价>卖出，市价>卖出：数量 -->
        <div
          class="rightFifth"
          v-if="form.delegateType == 0 || (form.type == 1 && form.delegateType == 1)"
        >
          <input
            v-model="form.count"
            @input="countChange"
            type="number"
            class="amount"
            :placeholder="`${_t18(`metastaking_bb_count`)} (${
              props.coinInfo.customizeFlag === 2
                ? matchText(props.coinInfo.showSymbol, '/USDT')
                : props.coinInfo.coin.toUpperCase()
            })`"
          />
        </div>
        <!-- 滑块部分 -->
        <div class="rightFourth">
          <div class="slider-select">
            <div
              v-for="percent in [25, 50, 75, 100]"
              :key="percent"
              :class="['slider-btn', { active: form.slider === percent }]"
              @click="onSelectPercent(percent)"
            >
              {{ percent }}%
            </div>
          </div>
        </div>
        <!-- 市价>买入，限价>买入，限价>卖出：成交金额 -->
        <div class="rightFifth" v-if="!(form.type == 1 && form.delegateType == '1')">
          <input
            v-model="form.turnover"
            @input="turnoverChange"
            type="number"
            class="amount"
            :placeholder="`${_t18(
              ['rxce'].includes(_getConfig('_APP_ENV')) ? `pledge_purchasing_price` : `bb_turnover`
            )} (${props.coinInfo.baseCoinUpperCase})`"
          />
        </div>
        <!-- 数量 (rxce特殊需求：增加展示usdt价格折合成当前币种)-->
        <div
          class="rightSix"
          v-if="['rxce'].includes(_getConfig('_APP_ENV')) && form.type == 0"
        >
          <div>{{ _t18(`buy_bb_count`) }}</div>
          <div class="number fw-num">
            {{ priceFormat(_div(form.turnover, coinPriceInfo.close)) }}
            {{
              props.coinInfo.customizeFlag === 2
                ? matchText(props.coinInfo.showSymbol, '/USDT')
                : props.coinInfo.coin?.toUpperCase()
            }}
          </div>
        </div>
        <!-- 可用 -->
        <div class="rightSix">
          <div>{{ _t18(`account_available`) }}</div>
          <div class="number fw-num" v-if="form.type == 0">{{ availableBalance }} USDT</div>
          <div class="number fw-num" v-else>
            {{ availableBalance }}
            {{
              props.coinInfo.customizeFlag === 2
                ? matchText(props.coinInfo.showSymbol, '/USDT')
                : props.coinInfo.coin?.toUpperCase()
            }}
          </div>
        </div>
        <!-- 占位 -->
        <!-- <div class="rightSeat" v-if="form.delegateType == 1&&!['rxce'].includes(_getConfig('_APP_ENV'))"></div> -->
        <!-- 买入/ 卖出按钮：自定义币种 (coinInfo.customizeFlag == 2),非自定义币种 -->
        <div class="rightSeven" @click="submit" v-if="props.coinInfo.customizeFlag == 2">
          <div class="maybutton" :class="{ hightColorRed: form.type == 1 }">
            <!-- 买入 -->
            <template v-if="form.type == 0">
              {{ _t18(`purchase`) }} {{ props.coinInfo.showSymbol.replace('/USDT', '') }}
            </template>
            <!-- 卖出 -->
            <template v-else>
              {{ _t18(`bb_sell1`) }} {{ props.coinInfo.showSymbol.replace('/USDT', '') }}</template
            >
          </div>
        </div>
        <div class="rightSeven" @click="submit" v-else>
          <div class="maybutton" :class="{ hightColorRed: form.type == 1 }">
            <!-- 买入 -->
            <template v-if="form.type == 0">
              {{ _t18(`purchase`) }} {{ props.coinInfo.coinUpperCase }}
            </template>
            <!-- 卖出 -->
            <template v-else> {{ _t18(`bb_sell1`) }} {{ props.coinInfo.coinUpperCase }}</template>
          </div>
        </div>
      </div>
      <!-- 盘口信息 -->
      <div >
        <Handicap :coinInfo="coinInfo" @setTradePrice="setTradePrice"></Handicap>
      </div>
     
    </div>
    <!-- <div class="line"></div> -->
    <!-- 订单信息 -->
    <div class="order-tabs">
      <div
        :class="['tab', { active: currentTab === 'current' }]"
        @click="handleTabClick('current')"
      >
        {{ _t18('exchange_curentrust') }}
      </div>
      <div
        :class="['tab', { active: currentTab === 'history' }]"
        @click="handleTabClick('history')"
      >
        <img src="@/assets/defi/time.png" class="tab-icon" />
         {{ _t18('exchange_hisentrust2') }}
      </div>
    </div>
    <div class="order-content">
      <div > <!-- v-if="currentTab === 'current'" -->
        <div v-if="dataList.length === 0" class="empty-record">
          <img src="/static/img/W2k_c7838bd9_spH.cd0c5744.png" class="empty-icon" />
          <div class="empty-text"> {{ _t18('25_wushuju') }}</div>
        </div>
        <!-- 可在此处渲染当前委托列表 -->
         <div v-else>
            <div v-for="(data, index) in dataList" class="hisToryList">
              
               
                <div class="header">
                  <div class="headerLeft">
                    <!-- 买 -->
                    <div class="name" v-if="data.type == 0">{{ _t18(`buy`) }}</div>
                    <!-- 卖 -->
                    <div class="name name2" v-if="data.type == 1">{{ _t18(`sell`) }}</div>
                    <div class="fw-bold">
                      {{
                        data.showCoin
                          ? data.showCoin
                          : data.symbol?.toUpperCase() + '/' + data.coin?.toUpperCase()
                      }}
                    </div>
                  </div>
                  <!-- 撤单 -->
                  <div v-if=" data.status == 0" class="headerRight" @click="cancelOrder(data.id)">
                    {{ _t18(`bb_Cancellation`) }}
                  </div>
                </div>
                <div class="list">
                  <!-- 时间 -->
                  <div class="item">
                    <div>{{ _t18(`k_time`) }}</div>
                    <div class="fw-num numItem" v-if="data.delegateTime">
                      {{ formatTo12Hour(data.params?.delegateTime) }}
                    </div>
                  </div>
                  <!-- 委托价 -->
                  <div class="item">
                    <div>{{ _t18(`bb_commission_price`) }}</div>
                    <div class="fw-num numItem">{{ data.delegatePrice || 0 }}</div>
                  </div>
                  <!-- 委托量 -->
                  <div class="item" v-if="!['rxce'].includes(_getConfig('_APP_ENV'))">
                    <div>{{ _t18(`bb_commission_amount`) }}</div>
                    <div class="fw-num numItem">{{ data.delegateTotal || 0 }}</div>
                  </div>
                  <!-- 数量 -->
                  <div class="item">
                    <div>{{ _t18(`metastaking_bb_count`) }}</div>
                    <div class="fw-num numItem">{{ data.dealNum || 0 }}</div>
                  </div>
                  <!-- 成交价 ,rxce:最新价 -->
                  <div class="item" v-if="['rxce'].includes(_getConfig('_APP_ENV')) && data.type === 0">
                    <div>{{ _t18(`home_newPrice`) }}</div>
                    <div class="fw-num numItem">{{ newPrice || 0 }}</div>
                  </div>
                  <div class="item" v-else>
                    <div>{{ _t18(`home_turnover`) }}</div>
                    <div class="fw-num numItem">{{ data.dealPrice || 0 }}</div>
                  </div>
                </div>
              
            </div>
         </div>
      </div>
      
    </div>
  </div>
</template>

<script setup>
import { submitOrderCurrencyApi } from '@/api/trade'
import Handicap from '../../common/handicap.vue'
import OrderListBox from './OrderListBox.vue'
import { _t18 } from '@/utils/public'
import { _div, _mul, _toFixed, priceFormat } from '@/utils/decimal'
import { showToast } from 'vant'
import { useToast } from '@/hook/useToast'
import { cancelOrderCurrencyApi, getOrderListCurrencyApi } from '@/api/trade/index'
const { _toast, _showName } = useToast()
import { useTradeStore } from '@/store/trade'
const tradeStore = useTradeStore()

import { socketDict } from '@/config/dict'
import PubSub from 'pubsub-js'

function formatTo12Hour(value) {
  if (!value) return '-'
  const date = new Date(value)
  if (isNaN(date.getTime())) return value

  const MM = String(date.getMonth() + 1).padStart(2, '0')
  const DD = String(date.getDate()).padStart(2, '0')
  let hours = date.getHours()
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const ampm = hours >= 12 ? 'PM' : 'AM'
  hours = hours % 12 || 12
  return `${hours}:${minutes} ${ampm} ${MM}/${DD}`
}


import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const currentTab = ref('current')
const currentOrderList = ref([]) // 实际开发请替换为你的当前委托数据
const historyOrderList = ref([]) // 实际开发请替换为你的历史记录数据

function handleTabClick(tab) {
  
  
  
  if (tab === 'history') {
    router.push('/quantCurrencyOrder')
    // orderType.value = 
  } else {
    dataList.value = []
    dataNewList.value = []
    pageNum.value = 1
    currentTab.value = tab
    orderType.value = 0
    getOrderList(orderType.value)
  }
}

const props = defineProps({
  coinInfo: {
    type: Object
  }
})
/**
 * 账户余额
 */
import { useUserStore } from '@/store/user/index'
const userStore = useUserStore()
const { asset } = storeToRefs(userStore)
console.log(asset.value)
const availableBalance = computed(() => {
  let tempValue = 0
  if (asset.value.length) {
    if (form.type == '0') {
      tempValue = asset.value.filter((item) => item.symbol === 'usdt' && item.type == 9)[0]?.availableAmount || 0
    } else {
      tempValue =
        asset.value.filter((item) => item.symbol === props.coinInfo.coin && item.type == 9)[0]?.availableAmount || 0
    }
  }
  return tempValue
})

// 币种开盘价等

const coinPriceInfo = computed(() => {
  return tradeStore.allCoinPriceInfo[props.coinInfo.coin] || {}
})

// 切换币种，重置表单
watch(
  () => {
    props.coinInfo
  },
  (n) => {
    restForm()
  },
  {
    deep: true
  }
)
/**
 * 表单
 * type：买入0，卖出1
 * delegateType：限价0，市价1
 */
const form = reactive({
  type: '0',
  delegateType: null
})
// 重置表单
const restForm = () => {
  let tempForm = {
    ...form,
    price: '', // 价格
    count: '', // 数量
    turnover: '', // 成交金额
    slider: 0 // 滑块
  }
  Object.assign(form, tempForm) //复制tempForm到form
}

/**
 * 买入 卖出
 */
const tradeTypeList = [
  { label: _t18(`purchase`), value: '0' },
  { label: _t18(`bb_sell1`), value: '1' }
]
// 切换买入/卖出
const checkedTradeType = (item) => {
  if (item.value !== form.type) {
    form.type = item.value
    // rxce卖出只有市价
    if (['rxce'].includes(__config._APP_ENV)) {
      if (item.value == '1') {
        checkedDelegateType(delegateTypeList[0])
      }
    }
  }
  restForm()
}

/**
 * 市价 限价
 */
const delegateTypeList = [
  { label: _t18(`bb_market_order`), placeholder: _t18(`market_price`), value: '1' },
  { label: _t18(`bb_Limit_order`), placeholder: _t18(`limit_price`), value: '0' }
]
// 当前选中交易价格类型：限价/市价
const currentDelegateType = ref({})
// 限价/市价选择控件
const showPopover = ref(false)
// 切换限价/市价
const checkedDelegateType = (item) => {
  if (item.value !== form.delegateType) {
    form.delegateType = item.value
    currentDelegateType.value = item
  }
  restForm()
  showPopover.value = false
}
// 默认选中
checkedDelegateType(delegateTypeList[0])

/**
 * 订单模块Ref
 */
const orderListBoxRef = ref(null)

/**
 * 提交表单
 */
const submit = async () => {
  let msg = false
  if (form.delegateType == 1 && form.type == 1) {
    // 市价&&卖出
    if (!form.count) {
      msg = _showName('please_enter_quantity') // 请输入数量
    } else if (form.count > availableBalance.value) {
      msg = _showName('Insufficient_funds_available') // 可用金额不足
    }
  } else if (form.delegateType == 0 && form.type == 1) {
    // 限价&&卖出
    if (!form.price) {
      msg = _showName('enter_the_amount') // 请输入金额
    } else if (!form.count) {
      msg = _showName('please_enter_quantity') // 请输入数量
    } else if (form.count > availableBalance.value) {
      msg = _showName('Insufficient_funds_available') // 可用金额不足
    }
  } else {
    // (市价&&买入)||(限价&&买入)
    if (!form.turnover) {
      msg = _showName('enter_the_amount') // 请输入金额
    } else if (form.turnover <= 0) {
      msg = _showName('amount_incorrect') //金额不正确
    } else if (form.turnover > availableBalance.value) {
      msg = _showName('Insufficient_funds_available') // 可用金额不足
    }
  }
  if (msg) {
    showToast(msg)
    return
  }
  let params = {
    symbol: props.coinInfo.coin, //交易币种(e.g btc)
    coin: props.coinInfo.baseCoin, //结算币种(usdt)
    delegateTotal: form.count, //委托总量
    delegatePrice: form.price, //委托价格
    delegateValue: form.turnover, //委托价值
    delegateType: form.delegateType, //委托类型（0限价1市价）
    type: form.type //（0买入1卖出）
  }
  const res = await submitOrderCurrencyApi(params)
  // 购买成功
  if (res.code == 200) {
    userStore.getUserInfo()
    showToast(res.msg)
    restForm()
  
    // ✅ 下单成功后，立即刷新当前委托列表
    dataList.value = []
    pageNum.value = 1
    getOrderList(orderType.value)
  } else {
    showToast(res.msg)
  }
}

/**
 * 滑块监听
 */
const sliderChange = (val) => {
  val = val / 100
  let tempPrice = 0
  if (form.delegateType == 0) {
    // 限价
    tempPrice = form.price
  } else if (form.delegateType == 1) {
    // 市价
    tempPrice = coinPriceInfo.value.close
  }
  if (Number(tempPrice)) {
    if (form.delegateType == 1 && form.type == 1) {
      // 市价&&卖出
      form.count = _mul(availableBalance.value, val)
    } else if (form.delegateType == 0 && form.type == 1) {
      // 限价&&卖出
      form.count = _mul(availableBalance.value, val)
      form.turnover = _toFixed(_mul(form.count, tempPrice))
    } else {
      // (市价&&买入)||(限价&&买入)
      form.count = _mul(_div(availableBalance.value, tempPrice), val)
      form.turnover = _toFixed(_mul(form.count, tempPrice))
    }
  }
}

/**
 * 成交金额监听
 */
const turnoverChange = () => {
  let val = form.turnover
  if (Number(val) > Number(availableBalance.value)) {
    // 输入金额大于可用余额
    form.turnover = availableBalance.value
    val = availableBalance.value
  }
  let tempPrice = 0
  if (form.delegateType == 0) {
    // 限价
    tempPrice = form.price
  } else if (form.delegateType == 1) {
    // 市价
    tempPrice = coinPriceInfo.value.close
  }
  // 根据成交额 价格 计算数量
  if (Number(tempPrice)) {
    form.count = _div(val, tempPrice)
    form.slider = parseInt(_mul(_div(val, availableBalance.value), 100))
  }
}

/**
 * 数量监听
 */
const countChange = () => {
  let val = form.count
  if (form.delegateType == 1 && form.type == 1) {
    // 市价&&卖出
    form.slider = parseInt(_mul(_div(val, availableBalance.value), 100))
  } else if (form.delegateType == 0) {
    // (限价&&卖出)||(限价&&买入)
    if (Number(form.price) && Number(val)) {
      // 根据数量、价格form.price计算成交额
      form.turnover = _toFixed(_mul(form.price, val))
    }
  } else if (form.delegateType == 1) {
    // 市价&&买入
    if (Number(val) && Number(coinPriceInfo.value.close)) {
      // 根据数量、价格计算成交额
      form.turnover = _toFixed(_mul(coinPriceInfo.value.close, val))
    }
  }
}

/**
 * 价格监听
 */
const priceChange = () => {
  let val = form.price
  if (form.delegateType == 0) {
    // 限价
    if (Number(form.count) && Number(val)) {
      // 根据数量、价格计算成交额
      form.turnover = _toFixed(_mul(form.count, val))
    }
  }
  // 市价忽略
}

/**
 * 设置交易价格
 */
const setTradePrice = (val) => {
  if (form.delegateType == 0) {
    // 限价触发
    form.price = priceFormat(val)
    priceChange(form.price)
  }
}
/**
 * 订单结算，更新订单和用户信息
 */
const settlementKey = ref('')

const coinOverNotification = () => {
  /**
   * 结算改变通知
   */
  settlementKey.value = PubSub.subscribe(socketDict.SETTLEMENT, (key, data) => {
    const { type } = JSON.parse(data.date.message)
    if (type == 1) {
      orderListBoxRef.value.refresh()
      userStore.getUserInfo()
    }
  })
}
coinOverNotification()

const showEye = ref(true)
const loading = ref(false)
const finished = ref(false)
const total = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)
const dataList = ref([])
const dataNewList = ref([])
// 上拉加载分页
const onLoad = () => {
  loading.value = true
  getOrderList(orderType.value)
}
const getOrderList = async (status) => {
  loading.value = true
  finished.value = false
  let params = `isAsc=desc&orderByColumn=updateTime&status=${status}&pageSize=${pageSize.value}&pageNum=${pageNum.value}`
  const res = await getOrderListCurrencyApi(params)
  if (res.code == '200') {
    setTimeout(() => {
      loading.value = false
      res.rows && dataList.value.push(...res.rows)
      // filterEyes(props.coinInfo.coin)
      total.value = res.total
      if (dataList.value.length >= total.value) {
        finished.value = true
      }
      pageNum.value++
    }, 500)
    // if (status == 0) {
    //   tabList.value[0].num = res.total
    // } else if (status == 1) {
    //   tabList.value[1].num = res.total
    // }
  }
}
const getNum = async (status) => {
  // let params = `isAsc=desc&orderByColumn=updateTime&status=${status}&pageSize=${pageSize.value}&pageNum=${pageNum.value}`
  // const res = await getOrderListCurrencyApi(params)
  // if (res.code == '200') {
  //   if (status == 0) {
  //     tabList.value[0].num = res.total
  //   } else if (status == 1) {
  //     tabList.value[1].num = res.total
  //   }
  // }
}
// 切换列表
const orderType = ref(0)
getOrderList(0)
const init = () => {
  
  getNum(1)
}
const showChe = ref(true)
// 撤单
const cancelOrder = async (id) => {
  const res = await cancelOrderCurrencyApi(id)
  if (res.code == 200) {
    showToast(res.msg)
    // ✅ 撤单后重新获取订单列表
    dataList.value = []
    pageNum.value = 1
    getOrderList(orderType.value)
  } else {
    showToast(res.msg)
  }
}
// onMounted(() => {
//   init()
// })

onUnmounted(() => {
  settlementKey && PubSub.unsubscribe(settlementKey)
})

const onSelectPercent = (percent) => {
  form.slider = percent
  sliderChange(percent)
}
</script>

<style lang="scss" scoped>
.hightColor {
  color: var(--ex-font-color) !important;
  background-color: #17ac74 !important;
}
.hightColorRed {
  color: var(--ex-font-color) !important;
  background-color: var(--ex-div-bgColor7) !important;
}
.rightScondList {
  width: 180px;
  background-color: var(--ex-default-background-color);
  padding: 5px 0;
  font-size: 12px;
  color: var(--ex-passive-font-color);
  .rightScondListItem {
    padding: 10px 0;
    text-align: center;
    // background: var(--ex-div-bgColor);
  }
}
.content {
  display: flex;
  padding: 20px 15px;
  background: #fff;
  & > div {
    flex: 1;
    .rightFirst {
      height: 35px;
      display: flex;
      gap: 10px;
      .trade-type-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        height: 35px;
        background: #f5f5f5;
        color: #222;
        cursor: pointer;
        border: none;
        transition: background 0.2s, color 0.2s;
        border-radius: 6px;
        
      }
      .trade-type-btn--left {
        /* 买入按钮：右上角大 */ 
        -webkit-transform-origin: top left;
        transform: perspective(40px) scale(.993, 1.053) rotateX(-3deg);
      }
      .trade-type-btn--right { 
        transform-origin: bottom right;
        transform: perspective(40px) scale(.993, 1.053) rotateX(3deg);
      }
      .trade-type-btn--buy {
        background: #00c693 !important;
        color: #fff !important;
      }
      .trade-type-btn--sell {
        background: var(--ex-div-bgColor7) !important;
        color: #fff !important;
      }
    }
    .rightScond {
      margin-top: 10px;
      .entrustSelect {
        font-size: 12px;
        width: 180px;
        height: 40px;
        background: #fff;
        border: 1px solid var(--ex-div-bgColor5);
        border-radius: 2px 2px 2px 2px;
        display: flex;
        border-radius: 6px;
        align-items: center;
        justify-content: center;
        position: relative;
        color: var(--ex-default-font-color);
        .img {
          width: 10px;
          height: 5px;
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    .rightThird {
      margin-top: 10px;
      width: 180px;
      height:40px;
      border:   1px solid var(--ex-div-bgColor5);
      border-radius: 2px 2px 2px 2px;
      font-size: 12px;
      color: var(--ex-passive-font-color);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius:6px;
    }
    .rightFourth {
      margin-top: 10px;
      .slider-select {
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
        .slider-btn {
          flex: 1;
          margin: 0 4px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          border-radius: 6px;
          background: #f5f5f5;
          color: #222;
          cursor: pointer;
          font-size: 12px;
          transition: background 0.2s, color 0.2s;
          border: 1px solid #e0e0e0;
          &.active {
            background: #222;
            color: #fff;
            border: 1px solid #222;
          }
        }
      }
    }
    .rightFifth {
      margin-top: 10px;
      .amount {
        width: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        background: #fff;
        border: 1px solid var(--ex-div-bgColor5);
        border-radius: 6px;
        font-size: 12px;
        color: var(--ex-default-font-color);
        text-align: center;
      }

      input::placeholder {
        color: var(--ex-font-color5);
      }
    }
    .rightSix {
      flex: 1;
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: var(--ex-passive-font-color);
      .number {
        color: var(--ex-default-font-color);
      }
    }
    .rightSeat {
      height: 43px;
    }
    .rightSeven {
      // flex: 1;
      margin-top: 10px;
      .maybutton {
        height: 40px;
        background: #00c693;
        border-radius: 3px 3px 3px 3px;
        font-size: 14px;
        color: var(--ex-font-color);
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
.line {
  height: 5px;
  background: var(--ex-div-bgColor10);
}
.rightLine {
  height: 10px;
}
.van-slider__bar {
  background: var(--ex-div-bgColor1) !important;
}
.order-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px 0 24px;

  .tab {
    font-weight: 400;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: 0.2s;

    &.active {
      color: #000;
      font-size: 16px;
      font-weight: 500;
    }

    .tab-icon {
      width: 18px;
      height: 18px;
      margin-right: 6px;
    }

    /* ✅ 第二个 tab（歷史記錄）字体加大 */
    &:nth-child(2) {
      font-size: 15px;
      font-weight: 500;
    }
  }
}
.order-content {
  padding: 0 24px 24px 24px;
}
.empty-record {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  .empty-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
  }
  .empty-text {
    color: #8c8c8c;
    font-size: 16px;
    margin-top: 8px;
  }
}

.colorBlue {
  color: var(--ex-font-color9) !important;
}
.hisToryList {
  padding: 15px 0px 0;
  // border-bottom: 1px solid var(--ex-border-color);
  .header {
    padding-bottom: 20px;
    font-size: 14px;
    color: var(--ex-default-font-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .headerLeft {
      display: flex;
      align-items: center;
      .name {
        padding: 0 5px;
        font-size: 12px;
        background: #00c693;
        border-radius: 2px 2px 2px 2px;
        margin-right: 10px;
        color: var(--ex-font-color);
      }
      .name2 {
        background: var(--ex-rfd-fall);
      }
    }
    .headerRight {
      padding: 4px 12px;
        background: #3b6cff; /* 蓝色底 */
        color: #fff; /* 白色文字 */
        border-radius: 6px; /* 圆角更柔和 */
        border: none; /* 去掉边框 */
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 轻阴影提升层次 */
    }
  }
  .list {
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: var(--ex-passive-font-color);
      padding-bottom: 15px;
      .numItem {
        color: var(--ex-default-font-color);
      }
      .numItemRed {
        color: var(--ex-font-color15);
      }
    }
  }
}
</style>
